<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>盖房子</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 800px;
            height: 500px;
            border: 1px solid red;
            position: relative;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        ul {
            position: absolute;
            bottom: 0;
        }
        
        li {
            width: 20px;
            height: 20px;
            border: 1px solid black;
            background-color: cyan;
            float: left;
            box-sizing: border-box;
            transition: all 1s;
            transform: translate(0, 0) rotate(0);
            opacity: 1;
        }
        
        .remove {
            transform: translate(0, 100px) rotate(360deg);
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <!--
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
-->
    </div>
</body>
<script>
    var divWrap = document.querySelector(".wrap");
    var liNum = 20;
    var ulBot = 0;
    var timerGap = 500;

    function createUl() {
        var ul = document.createElement("ul");
        divWrap.appendChild(ul);
        ul.style.bottom = ulBot + "px";
        ul.timer = null;

        //创建li
        for (var i = 0; i < liNum; i++) {
            var li = document.createElement("li");
            ul.appendChild(li);
        }
        var maxDis = divWrap.clientWidth - ul.offsetWidth;
        var speed = 20;
        ul.timer = setInterval(function () {
            var offleft = ul.offsetLeft;
            offleft += speed;
            ul.style.left = offleft + "px";
            if (offleft >= maxDis || offleft <= 0) {
                speed *= -1;
            }
        }, timerGap);
    }
    createUl();
    divWrap.onclick = function () {
        var uls = document.getElementsByTagName("ul");
        var currentUl = uls[uls.length - 1];
        clearInterval(currentUl.timer);
        currentUl.timer = null;

        //切掉多余的
        if (uls.length != 1) {
            var preUl = uls[uls.length - 2];
            //获取俩个ul的左翩亮的差值
            var distance = currentUl.offsetLeft - preUl.offsetLeft;
            var removeNum = parseInt(Math.abs(distance) / 20);
            liNum -= removeNum;
            if (liNum <= 0) {
                alert("game over");
                return;
            }
            var lis = currentUl.getElementsByTagName("li");
            if (distance > 0) {
                //右侧开始删除li
                for (var i = 0; i < removeNum; i++) {
                    lis[lis.length - i - 1].className = "remove";
                    lis[lis.length - i - 1].timerout = null;
                }
                for (var i = 0; i < removeNum; i++) {
                    lis[lis.length - 1].timerout = setTimeout(function () {
                        lis[lis.length - 1].remove();
                    }, 1000);
                }
            } else {
                //从左边开始删除li
                for (var i = 0; i < removeNum; i++) {
                    lis[i].className = "remove";
                    lis[i].timerout = null;
                }
                for (var i = 0; i < removeNum; i++) {
                    lis[0].timerout = setTimeout(function () {
                        lis[0].remove();
                        currentUl.style.left = currentUl.offsetLeft + lis[0].offsetWidth + "px";
                    }, 1000);

                }
            }
        }
        ulBot += currentUl.offsetHeight;
        if (timerGap > 50) {
            timerGap -= 50;
        } else {
            timerGap = 50;
        }
        createUl();

    }
</script>










</html>